<template>
	<view class="out-box">
		<!-- 斜线 -->
		<view class="oblique-bar"></view>
		<view class="oblique-bar-two"></view>
		<!-- 内容 -->
		<view class="content">
			<!-- 标题 -->
			<view class="title">
				个人资料
			</view>
			<!-- 头像信息卡片 -->
			<view class="imageInfo">
				<view class="imageInfo-card">
					<view class="imageInfo-image" @click="selectimg">
						<image :src="state.userImg"></image>
					</view>
					<p class="imageInfo-name">{{state.userInfo.name}}</p>
					<!-- <p class="imageInfo-email">{{state.userInfo.wechatId}}</p> -->
				</view>
			</view>
			<!-- 功能栏 -->
			<view class="able">
				<!-- 编辑个人信息 -->
				<view class="able-item" @click="goCodeDetail">
					<!-- 图标 -->
					<view class="able-item-icon">
						<view class="icon">
							<image src="../../static/bianji.svg"></image>
						</view>
					</view>
					<!-- 功能文字 -->
					<view class="able-item-text">
						编辑个人信息
					</view>
					<!-- 右键图标 -->
					<view class="able-item-right">
						<image src="../../static/you.svg"></image>
					</view>
				</view>
				<!-- 账户安全 -->
				<view class="able-item" @click="goProtect">
					<!-- 图标 -->
					<view class="able-item-icon">
						<view class="icon">
							<image src="../../static/anquan.svg"></image>
						</view>
					</view>
					<!-- 功能文字 -->
					<view class="able-item-text">
						账户安全
					</view>
					<!-- 右键图标 -->
					<view class="able-item-right">
						<image src="../../static/you.svg"></image>
					</view>
				</view>
				<!-- 邮件 -->
				<view class="able-item" @click="goEmail">
					<!-- 图标 -->
					<view class="able-item-icon">
						<view class="icon">
							<image src="../../static/user/youjian.svg"></image>
						</view>
					</view>
					<!-- 功能文字 -->
					<view class="able-item-text">
						消息通知
					</view>
					<!-- 右键图标 -->
					<view class="able-item-right">
						<image src="../../static/you.svg"></image>
					</view>
				</view>
				<!-- 导入导出 -->
				<view class="able-item" @click="goExcel">
					<!-- 图标 -->
					<view class="able-item-icon">
						<view class="icon">
							<image src="../../static/user/daochu.svg"></image>
						</view>
					</view>
					<!-- 功能文字 -->
					<view class="able-item-text">
						excel导出
					</view>
					<!-- 右键图标 -->
					<view class="able-item-right">
						<image src="../../static/you.svg"></image>
					</view>
				</view>
				<!-- 设置 -->
				<view class="able-item" @click="goSetPage">
					<!-- 图标 -->
					<view class="able-item-icon">
						<view class="icon">
							<image src="../../static/shezhi.svg"></image>
						</view>
					</view>
					<!-- 功能文字 -->
					<view class="able-item-text">
						设置
					</view>
					<!-- 右键图标 -->
					<view class="able-item-right">
						<image src="../../static/you.svg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view v-show="state.hiden == true" class="hiden"></view>
		<!-- 选择图库或者拍照弹出层 -->
		<view class="selectImgWay" :class="state.selectImage==true?'selectImgWayHiden':''">
			<!-- 选项栏 -->
			<view class="selectItem">
				<!-- 选择图库 -->
				<view class="picture" :class="state.selectImgId == 1 ?'pitch':''" @mousedown="setWay(1)" @mouseup="awayP">
					<view>图</view>
					<view>库</view>
				</view>
				<view class="bar"></view>
				<!-- 选择拍照 -->
				<view class="picture" :class="state.selectImgId == 2 ?'pitch':''" @mousedown="setWay(2)" @mouseup="awayP">
					<view>拍</view>
					<view>照</view>
				</view>
			</view>
			<!-- 取消栏 -->
			<view class="cancel" :class="state.selectImgId == 3 ?'pitch':''" @mousedown="setWay(3)" @mouseup="awayP">
				<view>取</view>
				<view>消</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {onPullDownRefresh} from '@dcloudio/uni-app';
import { onMounted, reactive } from "vue";
	// 数据源
	const state = reactive({
		hiden:false,
		selectImage:false,
		selectImgId:0,
		token:'',
		userImg:'',
		userInfo:{}
	})
	// 生命周期
	onMounted(()=>{
		getUserImg()
	})
	// 下拉刷新
	onPullDownRefresh(()=>{
		getUserImg()
		setTimeout(()=>{
			uni.stopPullDownRefresh()
		},1000)
	})
	// 获取头像链接
	const getUserImg = ()=>{
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
				uni.request({
					url:'http://124.221.162.230:8888/user/getImage',
					method:"POST",
					header: {
						Authorization: state.token
					},
					success: (imgData) => {
						state.userImg = imgData.data.data
						getUserInfo()
					}
				})
			}
		})
	}
	// 获取用户信息
	const getUserInfo = ()=>{
		uni.request({
			url:'http://124.221.162.230:8888/user/getById',
			method:"POST",
			header: {
				Authorization: state.token
			},
			success: (res) => {
				console.log(res)
				state.userInfo = res.data.data
			}
		})
	}
	// 选择图库或者拍照
	const selectimg = ()=>{
		// 打开遮罩层
		state.hiden = true
		state.selectImage = true
	}
	// 点击选择方式
	const setWay = (id) =>{
		state.selectImgId = id
		if(id == 1){
			getimg()
		}else if (id == 2) {
			takePhone()
		} else if (id == 3) {
			state.hiden = false
			state.selectImage = false
		}
	}
	// 拍照更改头像
	const takePhone = ()=>{
		uni.chooseImage({
			count: 1,
			sourceType: ['camera'],
			success: (e) => {
				// console.log(e.tempFiles[0])
				let tempFilePaths = e.tempFilePaths
				uni.uploadFile({
					url: 'http://124.221.162.230:8888/user/updateImage', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						Authorization: state.token
					},
					success: (res) => {
						if (res.statusCode == 200) {
							getUserImg()
						}
					}
				})
			}
		})
	}
	// 手指离开屏幕触发
	const awayP = () =>{
		setTimeout(()=>{
			state.selectImgId = 0
		},200)
		state.hiden = false
		state.selectImage = false
	}
	// 上传更改头像
	const getimg = ()=>{
		uni.chooseImage({
			count:1,
			sourceType:['album'],
			success: (e) => {
				// console.log(e.tempFiles[0])
				let tempFilePaths = e.tempFilePaths
				uni.uploadFile({
					url: 'http://124.221.162.230:8888/user/updateImage', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						Authorization: state.token
					},
					success: (res) => {
						if(res.statusCode == 200){
							getUserImg()
						}
					}
				})
			}
		})
	}
	// 去到账户安全页
	const goProtect = () =>{
		uni.navigateTo({
			url:'/pages/protectAccount/protectAccount'
		})
	}
	// 去到消息通知页面
	const goEmail = () =>{
		let objStr = state.userInfo;
		objStr = JSON.stringify(state.userInfo);
		uni.navigateTo({
			url:`/pages/email/email?obj=${objStr}`
		})
	}
	// 去到elcel导出页面
	const goExcel = ()=>{
		uni.navigateTo({
			url:'/pages/excel/excel'
		})
	}
	// 去到设置页
	const goSetPage = () =>{
		uni.navigateTo({
			url:'/pages/set/set'
		})
	}
	// 去到编辑个人信息页
	const goCodeDetail = () =>{
		let obj = JSON.stringify(state.userInfo)
		uni.navigateTo({
			url:`/pages/userDetail/userDetail?obj=${obj}`
		})
	}
</script>

<style lang="less" scoped>
	.out-box {
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		background: #F6FBFF;
		position: relative;
		overflow: hidden;

		.oblique-bar {
			position: absolute;
			top: 0;
			right: 100rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #ffffff, rgb(217, 242, 255));
			transform: translateY(-330rpx) rotateZ(-45deg);
		}
		.oblique-bar-two {
			position: absolute;
			top: 0;
			right: 40rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #F3F9FF, rgb(217, 242, 255));
			transform: rotateZ(-45deg);
		}
		.content{
			position: relative;
			z-index: 2;
			overflow: hidden;
			width: 100vw;
			height: 100%;
			.title{
				margin-top: 50rpx;
				display: flex;
				justify-content: center;
				font-size: 38rpx;
				font-weight: 700;
			}
			.imageInfo{
				margin-top: 220rpx;
				display: flex;
				justify-content: center;
				.imageInfo-card{
					width:540rpx;
					height: 250rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					box-shadow:0 6rpx 4rpx 4rpx #cccccc41;
					position: relative;
					padding: 70rpx 30rpx 30rpx 30rpx;
					box-sizing: border-box;
					.imageInfo-image{
						position: absolute;
						width: 180rpx;
						height: 180rpx;
						background-color: #fff;
						border-radius: 50%;
						left: 50%;
						top: -100rpx;
						transform: translateX(-50%);
						image{
							width: 180rpx;
							height: 180rpx;
							border-radius: 50%;
						}
					}
					p{
						margin-top: 20rpx;
						text-align: center;
						font-family: 思源黑体;
					}
					.imageInfo-name{
						font-size: 40rpx;
						color: #011749;
					}
					.imageInfo-email{
						font-size: 26rpx;
						color: #0117499d;
					}
				}
			}
			.able{
				margin-top: 60rpx;
				width: 100vw;
				height: 700rpx;
				// background-color: #cccccc41;
				padding: 0rpx 60rpx 0rpx 60rpx;
				box-sizing: border-box;
				.able-item{
					// border: 1rpx solid #000;
					margin-top: 30rpx;
					background-color: #fff;
					box-shadow:-2rpx 2rpx 8rpx 6rpx #cccccc41;
					border-radius: 20rpx;
					width: 100%;
					height: 110rpx;
					display: grid;
					grid-template-columns: 1.2fr 4fr 0.8fr;
					.able-item-icon{
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						.icon{
							width: 80%;
							height: 80%;
							background-color: #59c6f825;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 10rpx;
							image{
								width: 50rpx;
								height: 50rpx;
							}
						}
					}
					.able-item-text{
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						padding-left:20rpx;
						box-sizing: border-box;
						color: #002884;
						font-weight: 600;
						font-size: 34rpx;
					}
					.able-item-right{
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 40rpx;
							height: 70rpx;
						}
					}
				}
			}
		}
		.hiden{
			position: fixed;
			z-index:3;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 100%;
			background-color: rgba(201, 201, 201, 0.271);
		}
		.selectImgWay{
			transition: all 0.3s;
			position: absolute;
			z-index: 4;
			bottom: -400rpx;
			left: 0;
			width: 100vw;
			height: 400rpx;
			padding: 0rpx 40rpx 0rpx 40rpx;
			box-sizing: border-box;
			// background-color: red;
			.selectItem{
				height: 240rpx;
				width:100%;
				background-color: rgba(255,255,255,0.5);
				border-radius: 20rpx;
				.picture{
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					color: black;
					font-size: 36rpx;
				}
				.bar{
					width: 100%;
					height: 0.2rpx;
					background: rgba(0,0,0,0.1);
				}
				.pitch{
					transition: all 0.1s;
					background-color: rgba(255,255,255,0.8);
				}
			}
			.cancel{
				margin-top: 20rpx;
				height: 120rpx;
				width:100%;
				background-color: rgba(255,255,255,0.5);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				color: red;
				font-size: 36rpx;
			}
			.pitch{
				transition: all 0.1s;
				background-color: rgba(255,255,255,0.8);
			}
		}
		.selectImgWayHiden{
			transition: all 0.3s;
			transform: translateY(-400rpx);
		}
	}
</style>
